<template>
  <main class="main-bg">
    <!-- 顶部区域 -->
    <div class="top"></div>

    <!-- 左上角图表 -->
    <div class="left-top">
      <div class="title">人均消费金额排名</div>
      <div class="sub-title">Ranking of per capita consumption amount</div>
      <!-- 图表组件 -->
      <BaseEchart :echartOption="amountRankOption" />
    </div>

    <div class="left-bottom">
      <div class="title">购买力最强区/街道</div>
      <div class="sub-title">District/Street with the strongest purchasing power</div>
      <!-- 图表组件 -->
      <BaseEchart :echartOption="strongestPurchasingOption" />
    </div>


    <div class="right-top">
      <div class="title">老年人群平均消费金额</div>
      <div class="sub-title">Average consumption amount of the elderly population</div>
      <!-- 图表组件 -->
      <BaseEchart :echartOption="ageGroupOption" />
    </div>

    <div class="right-bottom">
      <div class="title">知名品牌/老字号金额TOP3</div>
      <div class="sub-title">Top 3 Amounts of Famous Brands/Timehonored Brands</div>
      <!-- 图表组件 -->
      <BaseEchart :echartOption="topBrandsOption" />
    </div>

    <div class="mid-top">
      <Digital />
    </div>
    <div class="mid-bottom"></div>
  </main>
</template>


<script setup lang="ts">
import BaseEchart from "./BaseEchart.vue";
import Digital from './Digital.vue'
import { amountRankOption  } from "./config/amount-rank-option.ts";
import { strongestPurchasingOption  } from "./config/strongest-purchasing-option.ts";
import {  ageGroupOption } from "./config/age-group-option.ts";
import {topBrandsOption} from './config/top-brands-option.ts'


// 调接口方法
</script>

<style scoped>
.mid-top {
  position: absolute;
  top: 230px;
  left: 690px;
}

.mid-bottom {
  position: absolute;
  top: 490px;
  left: 520px;
  width: 860px;
  height: 460px;
  background: center / cover no-repeat url(../assets/imgs/xiamen.svg);
}

.right-top {
  position: absolute;
  top: 130px;
  right: 20px;
  width: 500px;
  height: 320px;
}

.right-bottom {
  position: absolute;
  top: 580px;
  right: 20px;
  width: 500px;
  height: 320px;
}


.left-bottom {
  position: absolute;
  top: 580px;
  left: 20px;
  width: 500px;
  height: 320px;
}

.left-top {
  position: absolute;
  top: 130px;
  left: 20px;
  width: 500px;
  height: 320px;
}

.top {
  position: absolute;
  width: 100%;
  height: 183px;
  background-size: cover;
  background-image: url(../assets/imgs/top_bg.svg);
}

/* @import '../assets/css/order.css'; */
.main-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.title {
  font-size: 24px;
  color: white;
}

.sub-title {
  color: white;
  margin-bottom: 20px;
}
</style>